<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<PixsterViewModel>" %>

<asp:Content ID="indexTitle" ContentPlaceHolderID="TitleContent" runat="server">
	Pixter - <%= Model.CurrentDirectory.Name %> - <%= Model.CurrentAlbum.Name %>
</asp:Content>

<asp:Content ID="indexScript" ContentPlaceHolderID="ScriptContent" runat="server">
    <script type="text/javascript" src="<%= Url.JsScript("navigation.js")%>"></script>
</asp:Content>

<asp:Content ID="indexStyle" ContentPlaceHolderID="StyleContent" runat="server">
    <link rel="stylesheet" type="text/css" href="<%= Url.Stylesheet("gallery-style.css")%>" />
</asp:Content>

<asp:Content ID="indexContent" ContentPlaceHolderID="MainContent" runat="server">

<% if (Model.CurrentAlbum.Photos != null && Model.CurrentAlbum.Photos.Count > 0) { %>

<script type="text/javascript">
    function LoadPhoto(seoName) {
        if (seoName == "") {
            $("#fullplate-photo").html();
            showAlbum();
        }
        else {
            showLoading();
            $.post("/Album/GetPhoto", { directory: '<%= Model.CurrentDirectory.SeoName %>', albumName: '<%= Model.CurrentAlbum.SeoName %>', photoName: seoName }, function(photo) {
                if (photo == null) {
                    showAlbum();
                } else {
                    showPhoto();
                    $('#fullplate-photo').hide();
                    var data = "<a href='#" + photo.NextPhotoName + "'><img src='" + photo.DisplayImagePath + "' alt='" + photo.Title + "' /></a>"
                    $("#fullplate-photo").html(data);
                    $('#fullplate-photo').fadeIn();
                }
            }, "json");
        }

        function showLoading() {
            $("#photo-album").css("display", "none");
            $('#fullplate-photo').css("display", "none");
            $("#loader").css("display", "block");
        }
        
        function showAlbum() {
            $("#loader").css("display", "none");
            $('#fullplate-photo').css("display", "none");
            $("#photo-album").css("display", "block");
        }

        function showPhoto() {
            $("#loader").css("display", "none");
            $("#photo-album").css("display", "none");
            $('#fullplate-photo').css("display", "block");
        }
        
    }
</script>


        <div id="primary_content">
            <div id="main-content">
            
                <div id="fullplate-photo"></div>
                <div id="loader" class="loading"></div>
                
                <div id="photo-album">
                    <ul><% foreach (var p in Model.CurrentAlbum.Photos) { %>
                        <li>
                           <a href="#<%=p.SeoName%>"><img src="<%= p.ThumbPath %>" alt="<%= p.Title %>" /></a>
                        </li><% } %>
                    </ul>
                </div><!--/#photo-album-->
                <div class="clear">&nbsp;</div>
            </div><!--/#main-content-->
        </div> <!--/#primary_content-->
        

<% } %>
</asp:Content>